<template>
  <div>
    <van-nav-bar
      @click-left="$router.go(-1)"
      left-arrow
      title="个人信息"
    />
    <!-- 个人信息 -->
    <van-cell
      center
      is-link
      title="头像"
    >
      <van-image
        :src="profileInfo.photo"
        @click="onChangePhoto"
        class="avatar"
        fit="cover"
        height="30"
        round
        width="30"
      />
    </van-cell>
    <van-cell
      :value="profileInfo.name"
      @click="$refs.name.isShow()"
      is-link
      title="昵称"
    />
    <van-cell
      :value="profileInfo.gender === 0?'男':'女'"
      @click="$refs.gender.isShow()"
      is-link
      title="性别"
    />
    <van-cell
      :value="profileInfo.birthday"
      @click="$refs.birth.isShow()"
      is-link
      title="生日"
    />
    <!--
      表单元素的 hidden 表示隐藏这个表单元素
    -->
    <input
      @change="onFileChange"
      hidden
      ref="file"
      type="file"
    />
    <!-- /个人信息 -->
    <editor-avatar
      :photoUrl="photoUrl"
      :info="profileInfo"
      ref="avatar"
      @clearFileValue="clearFileValue"
    />
    <editor-name
      :info="profileInfo"
      ref="name"
    />
    <editor-gender
      :info="profileInfo"
      ref="gender"
    />
    <editor-birth
      :info="profileInfo"
      ref="birth"
    />
  </div>
</template>

<script>
import { getProfileInfo } from "../../network/user";
import { mapState } from "vuex";
import EditorAvatar from "./chi-coms/editor-avatar";
import EditorName from "./chi-coms/editor-name";
import EditorGender from "./chi-coms/editor-gender";
import EditorBirth from "./chi-coms/editor-birth";

export default {
  name: "EditorUser",
  components: {
    EditorAvatar,
    EditorName,
    EditorGender,
    EditorBirth
  },
  computed: {
    ...mapState(["userInfo"])
  },
  data() {
    return {
      profileInfo: {},
      isPreviewShow: false,
      photoUrl:''
    };
  },
  created() {
    this.loadProfileInfo();
  },
  mounted() {},
  methods: {
    //获取个人资料
    async loadProfileInfo() {
      const result = await getProfileInfo();
      if (result.message === "OK") {
        this.profileInfo = result.data;
        return;
      }
      this.$toast.fail("获取信息失败");
    },
    //点击选择图片(调用隐藏的表单元素)
    onChangePhoto() {
      this.$refs.file.click();
    },
    //选择了文件
    onFileChange() {
      const result = window.URL.createObjectURL(
        this.$refs.file.files[0]
      );
      this.photoUrl = result
      this.$refs.avatar.isShow();
    },
    clearFileValue() {
      this.$refs.file.value = ""
    }
  }
};
</script>

<style scoped lang="stylus" >
.van-cell__value
  display flex
  align-items center
  justify-content flex-end
</style>